<template>
    <view style="width: 750upx;margin-top: 20upx;background: #FEFEFE;padding-left: 30upx;padding-right: 30upx;">
        <view class="top">
            <view class="goal">
                <image src="../../static/setgoal/goal.png" mode="" style="height: 50upx;width: 50upx;"></image>
              
            </view>
            <view class="search">
                <input type="text" value="" placeholder="目标名称" class="input" placeholder-class="placeholder" v-model="message" />
            </view>
        </view>
        <view class="top">
            <view class="goal">
                <image src="../../static/setgoal/fire.png" mode="" style="height: 50upx;width: 50upx;"></image>
            </view>
            <view class="search">
                <text class="title">热门目标</text>
            </view>
        </view>
        <view class="midddle">
            <view class="top" @tap="getvalue(0)">
                <view class="goals">
                    <view class='cu-tag round line-yellow' style="width: 90upx;color:#ff5c36 ;">自律</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[0]}}</text>
                </view>
            </view>

            <view class="tops" @tap="getvalue(1)">
                <view class="goals">
                     <view class='cu-tag round line-yellow' style="width: 90upx;color:#08c163 ;">学习</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[1]}}</text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(2)">
                <view class="goals">
                   <view class='cu-tag round line-yellow' style="width: 90upx;color: #ff9f19;">减肥</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[2]}}</text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(3)">
                <view class="goals">
                     <view class='cu-tag round line-yellow' style="width: 90upx;color: #9a75f6;">记账</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[3]}} </text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(4)">
                <view class="goals">
                    <view class='cu-tag round line-yellow' style="width: 90upx;color: #ff5c36;">自律</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{ list[4]}}</text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(5)">
                <view class="goals">
                     <view class='cu-tag round line-yellow' style="width: 90upx;color: #08c163;">读书</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[5]}}</text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(6)">
                <view class="goals">
                   <view class='cu-tag round line-blue' style="width: 90upx;">记账</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[6]}}</text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(7)">
                <view class="goals">
                    <view class='cu-tag round line-green' style="width: 90upx;">戒烟</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[7]}} </text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(8)">
                <view class="goals">
                    <view class='cu-tag round line-yellow' style="width: 90upx;">减肥</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[8]}} </text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(9)">
                <view class="goals">
                    <view class='cu-tag round line-blue' style="width: 90upx;">减肥</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[9]}} </text>
                </view>
            </view>
            <view class="tops" @tap="getvalue(10)">
                <view class="goals">
                    <view class='cu-tag round line-purple' style="width: 90upx;">早睡</view>
                </view>
                <view class="searchof">
                    <text class="miaoshu">{{list[10]}} </text>
                </view>
            </view>
            <view  style="height: 120upx;"> </view>
        </view>
        <view class="dingwei">
            <button size="default" @tap="goto" hover-class="button-hover" class="button">下一步</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                message: "",
                list:[
                    "得不到想要的东西因为还不够努力，为了实现理想，每日积累点滴",
                    "早起挤出时间锻炼学习，记录每日变化，为完成梦想觉不退缩",
                    "挑战30天瘦5斤，下决心狠虐自己，失败大家分钱",
                    "强制储蓄，每天至少存钱20元，攒足拿去做自己想做的事情",
                    "人生只有一次，把握每刻时间，列出每日计划并严格执行",
                    "再忙也要抽空读书，每天必读书1小时，远离平庸和肤浅",
                    "为了发现未曾见过的世界，每天存下一笔钱，启动攒钱旅行计划",
                    "先定个21天不抽烟的小目标，坚持戒掉抽烟，失败继续挑战",
                    "控制饮食加锻炼减肥，瘦5斤变更加漂亮自信，记录减肥过程",
                    "为减肥拼尽全力，瘦下来改变人生，每天严格要求自己签到",
                    "熬夜伤身，为保持精力和健康必须戒掉熬夜坏习惯，每天23点前睡觉"
                ]
            }
        },
        methods: {
            goto() {
                if (this.message == "") {
                    uni.showToast({
                        title: '请填写目标名称',
                        duration: 2000,
                        icon: "none",
                        image: "../../static/setgoal/sigh.png"
                    });
                    return;
                }
                let c = this;
                uni.setStorage({
                    key: "goalname",
                    data: c.message,

                })
                uni.navigateTo({
                    url: "../setgoaldetailed/setgoaldetailed"
                });

            },
            getvalue(index) {
                // const query = uni.createSelectorQuery();
                // query.select('.miaoshu').fields({
                //     size: true,
                //     scrollOffset: true,
                //     context:true
                // }, data => {
                //     console.log(data)
                // }).exec();
                
              this.message = this.list[index];
               
            }
        }
    }
</script>

<style>
    .top {
        padding-top: 20upx;
        display: flex;
        flex-direction: row;
    }

    .input {
        background-color: #efefef;
        border: 1px solid #FEFEFE;
        border-radius: 40upx;
        width: 600upx;
        height: 60upx;
        padding-left: 30upx;
        padding-right: 30upx;
    }

    .search {
        padding-left: 30upx;
    }

    .placeholder {
        padding-left: 10upx;
        font-size: 35upx;
        color: #999999;
    }

    .title {
        color: #333333;
        font-weight: 800;
        font-size: 35upx;
    }

    .tops {
        padding-top: 35upx;
        display: flex;
        flex-direction: row;
    }

    .miaoshu {
        color: #333333;
        font-size: 33upx;
        line-height: 130%;
        font-family: "Microsoft YaHei";
    }

    .searchof {
        padding-left: 40upx;
    }

    .goals {
        padding-top: 20upx;
    }

    .dingwei {
        position: fixed;
        z-index: 2008;
        bottom: 0upx;
        padding-bottom: 40upx;
        width: 690upx;
        background-color: #FEFEFE;
        opacity: 1;

    }

    .button {
        background-color: #fe9f1a;
        border-radius: 50upx;
        height: 85upx;
        padding-bottom: 30upx;
        font-size: 35upx;
        font-weight: 800;
        color: white;
        width: 100%;
    }
</style>
